<template>
  <div class="mine">
    <div class="content">
      <div class="vanimg">
        <div>
          <van-image
            round
            width="50px"
            height="50px"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <span>Whz</span>
        </div>
        <div>
          <van-icon name="setting-o" size="25" @click="toMyAddress"/>
          <van-icon name="chat-o" size="25" />
        </div>
      </div>
      <div class="van-vip">
        <div class="vip-text">
          <van-icon name="vip-card-o" color="#ffffff" size="20" />
          <span>美团会员<span>已过期</span></span>
          <p>开通会员预计可省<span>223</span>元/月</p>
        </div>
        <div class="vip-button">
          <van-button color="linear-gradient(to right, #f7a137, #f85c3f)"
            >立即开通</van-button
          >
        </div>
      </div>
      <div class="van-count">
        <p>我的资产</p>
        <van-row>
          <van-col span="8">
            <van-icon name="gift" size="25" color="#f8743e" />
            <span>红包/神券</span>
            <p><span class="big-sum">5</span>个未使用</p>
          </van-col>
          <van-col span="8">
            <van-icon name="invitation" size="25" color="#f3a540" />
            <span>红包/神券</span>
            <p><span class="big-sum">2</span>个未使用</p>
          </van-col>
          <van-col span="8">
            <van-icon name="goods-collect" size="25" color="#f7843d" />
            <span>红包/神券</span>
            <p><span class="big-sum"></span>可叠加满减</p>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">
            <van-icon name="award" size="25" color="#efd463" />
            <van-badge content="可领" color="#f47958">
              <span> 米粒 </span>
            </van-badge>
            <p><span class="big-sum">0</span>个未使用</p>
          </van-col>
          <van-col span="8">
            <van-icon name="youzan-shield" size="25" color="#e79a3f" />
            <span>立减金</span>
            <p><span class="big-sum">1</span>笔返利</p>
          </van-col>
        </van-row>
      </div>
      <div class="van-stars">
        <p>我的收藏</p>
        <van-grid :border="false" :column-num="3">
          <van-grid-item>
            <van-image
              width="100px"
              height="90px"
              fit="cover"
              src="https://pic2.zhimg.com/v2-ee7b3a6afbd250696dbdd5de7eec3ceb_r.jpg?source=1940ef5c"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="100px"
              height="90px"
              fit="cover"
              src="https://img.zcool.cn/community/01e77b5d906281a8012060be7a6f70.jpg@1280w_1l_2o_100sh.jpg"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="100px"
              height="90px"
              src="https://n.sinaimg.cn/sinakd202167s/732/w1399h933/20210607/0e59-kracxer2059681.jpg"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="van-wallet">
        <van-row>
          <van-col span="12"><p>我的钱包</p></van-col>
          <van-col span="12"
            ><p><span>进入钱包<van-badge dot></van-badge> <van-icon name="arrow" /></span></p></van-col
          >
        </van-row>
        <van-row>
          <van-col span="6">
            <p><van-badge content="立减">
               <span>
                 10
               </span>元
            </van-badge></p>
            <p>积分兑换</p>
            <p>各类优惠券</p>
          </van-col>
          <van-col span="6">
            <p><span>1</span>个</p>
            <p>点击领取</p>
            <p>外卖红包</p>
          </van-col>
          <van-col span="6">
            <p><span>27.50</span>元</p>
            <p>我的账单</p>
            <p>最近支付</p>
          </van-col>
          <van-col span="6">
            <p><span>6</span>元</p>
            <p>待领取</p>
            <p>银行优惠</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import Footer from "../../components/footer.vue";
export default {
  components: {
    Footer,
  },
  setup(){
    const router=useRouter()  
    const toMyAddress=()=>{
      router.push('./address')
    }
    return{
      toMyAddress
    }
  }
};
</script>

<style lang="less" scoped>
.mine {
  display: flex;
  flex-flow: column;
  height: 100%;
  background-color: #fafafa;
  .content {
    padding: 0px 10px;
    flex: 1;
    overflow-y: auto;
    .vanimg {
      display: flex;
      flex-flow: wrap;
      padding-top: 10px;
      div:nth-child(1) {
        text-align: start;
        padding: 0px 10px;
      }
      div {
        flex: auto;
        text-align: end;
        vertical-align: middle;
        .van-image {
          vertical-align: middle;
        }
        span {
          font-size: 25px;
          font-weight: 600;
        }
        i {
          margin: 10px 10px;
          font-weight: 700;
        }
      }
    }
    .van-vip {
      margin: 15px 0;
      background-color: #fffae7;
      border: 1px solid #ffc400;
      border-radius: 10px;
      display: flex;
      flex-flow: wrap;
      .vip-text {
        flex: auto;
        text-align: start;
        padding: 5px 10px;
        i {
          background-color: #ffc400;
          border-radius: 10px;
          padding: 3px;
        }
        span {
          font-size: 10px;
          font-weight: 550;
          vertical-align: middle;
          margin: 0 5px;
          span {
            vertical-align: baseline;
            font-size: 8px;
            padding: 3px;
            border-radius: 5px;
            font-weight: normal;
            background-color: #faf1c2;
            color: #967932;
          }
        }
        p {
          font-size: 13px;
          font-weight: 700;
          margin: 0;
          span {
            margin: 0 0;
            font-size: 18px;
            vertical-align: baseline;
            font-weight: 600;
            color: red;
          }
        }
      }
      .vip-button {
        padding: 10px 5px 5px 0px;
        flex: auto;
        .van-button {
          border-radius: 10px;
        }
      }
    }
    .van-count {
      background-color: white;
      border-radius: 10px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      p {
        font-size: 12px;
        font-weight: 550;
        padding: 5px 0px 0px 15px;
        text-align: start;
      }
      .van-row {
        .van-col {
          span {
            font-size: 13px;
            font-weight: 600;
            vertical-align:text-bottom;
            margin-left: 5px;
          }
          p {
            color: slategrey;
            font-size: 10px;
            text-align: center;
            font-weight: 500;
            margin: 0px 0px 10px 0px;
            .big-sum {
              font-size: 14px;
              vertical-align: baseline;
              margin: 0 2px;
              color: #ec5648;
            }
          }
        }
      }
    }
    .van-stars {
      background-color: white;
      border-radius: 10px;
      padding-bottom: 10px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      p {
        font-size: 12px;
        font-weight: 550;
        padding: 10px 0px 0px 15px;
        text-align: start;
      }
      .van-grid {
        .van-grid-item {
          .van-image {
            border-radius: 10px;
            overflow: hidden;
          }
        }
      }
    }
    .van-wallet {
      margin-top: 10px;
      background-color: white;
      border-radius: 10px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      .van-row:nth-child(1) {
        .van-col:nth-child(1) {
          p {
            font-size: 12px;
            font-weight: 550;
            padding: 10px 0px 0px 15px;
            text-align: start;           
          }
        }
        .van-col:nth-child(2) {
          p {
            font-size: 8px;
            color: slategrey;
            padding: 15px 15px 0px 0px;
            text-align: end;
            
          }
        }
      }
      .van-row:nth-child(2) {
        .van-col {   
          p:nth-child(2){
            font-size: 14px;
            color: black;
          }    
          p{
            color: slategrey;
            font-size: 10px;
            text-align: center;
            font-weight: 500;
            margin: 0px 0px 10px 0px;                 
            span {
            font-size: 25px;
            font-weight: 600;
            color: black;
            vertical-align: baseline;
            margin-left: 5px;
           }
          }
          
        }
      }
    }
  }
}
</style>